<template>
  <div>
    <div class="home">
      <HomeHeader/>
      <div class="content">
        <div class="scrollWrap">
          <!--轮播图-->
          <Swiper1/>
          <!--3保-->
          <Guarantee/>
          <!--10个类目-->
          <Category/>
          <!--新人礼-->
          <NewMan/>
        </div>
      </div>
      <!--悬浮礼物-->
      <FloatPresent/>
      <!--回到顶部-->
      <FloatArrow/>
      <Footer/>
    </div>
    <HomeMask/>
  </div>
</template>

<script>
  // 功能插件
  import BSCroller from 'better-scroll'
  // 页面组件
  import HomeHeader from './Header'
  import Swiper1 from './Swipers/swiper'
  import Guarantee from './Gurantee'
  import Category from './Category'
  import NewMan from './NewMan'
  import FloatPresent from './FloatPresent'
  import FloatArrow from './FloatArrow'
  import Footer from 'components/Footer'
  import HomeMask from './Mask'
  
  export default {
    name: 'index',
    mounted () {
      // 发请求拿数据
      this.$store.dispatch('getGuarantee')
      this.$store.dispatch('getMenuCategory')
      this.$nextTick(()=>{
        new BSCroller('.content',{
          scrollY: true,
        })
      })
    },
    components: {
      HomeHeader,
      Swiper1,
      Guarantee,
      Category,
      NewMan,
      FloatPresent,
      FloatArrow,
      Footer,
      HomeMask
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .home
    width 100%
    height 100%
    .content
      width 100%
      height 1000px
      margin-top 22%
      background: #eee
</style>
